<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('基本表单')"/>
    <th:block th:include="include :: jquery-steps-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    .form-group_text {
        text-align: right !important;
        line-height: 31px !important;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-title">
                <h5>房源出售信息处理向导</h5>
            </div>
            <div class="ibox-content">
                <h2>
                    房源出售信息处理向导
                </h2>
                <form id="form" AUTOCOMPLETE="OFF">
                    <h1>填写小区信息</h1>
                    <fieldset>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>小区名称 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="residentialName" name="residentialName" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>城市 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="city" name="city" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>区域 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="region" name="region" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>参考均价(元/㎡) *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="priceAvg" name="priceAvg" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>建造年代 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="years" name="years" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>占地面积(㎡) *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="residentialMeasure" name="residentialMeasure" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>建筑类型 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="architectureType" name="architectureType" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>物业名称 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="propertyName" name="propertyName" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>绿化率 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="greeningRate" name="greeningRate" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>容积率 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="plotRatio" name="plotRatio" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>详细地址 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="address" name="address" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>经度 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="longitude" name="longitude" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>纬度 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="latitude" name="latitude" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>小区景图上传</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="file-loading">
                                    <input id="residentialFile" type="file" name="residentialFile"
                                           multiple="multiple">
                                </div>
                            </div>
                        </div>

                    </fieldset>
                    <h1>填写房源信息</h1>
                    <fieldset>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>价格(万元) *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="price" name="price" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>单价(元) *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="unitPrice" name="unitPrice" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>面积㎡ *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="measure" name="measure" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>楼层*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="floor" name="floor" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>装修风格*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="renovation" name="renovation" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>楼户*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="louhu" name="louhu" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>朝向*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="orientation" name="orientation" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>手机号*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="phone" name="phone" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>室*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="roomNum" name="roomNum" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>厅*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="officeNum" name="officeNum" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>房源图片上传</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="file-loading">
                                    <input id="housingFile" type="file" name="housingFile"
                                           multiple="multiple">
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <h1>填写售卖信息</h1>
                    <fieldset>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>售卖标题*</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="title" name="title" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="col-sm-2">
                                    <div class="form-group form-group_text">
                                        <label>标签 *</label>
                                    </div>
                                </div>
                                <div class="col-sm-10">
                                    <div class="form-group form-group_text">
                                        <input id="sellLabel" name="sellLabel" type="text"
                                               class="form-control required">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-steps-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>


<script th:inline="javascript">
    //小区是否是添加状态
    var isResidential = 0;

    //小区图片数组
    var residentialImageArray = new Array();

    //房源图片数组
    var HousingImageArray = new Array();

    //是否是查看
    var isSee = 0;

    $(function () {
        var meSellInfo = [[${meSellInfo}]];

        //小区ID
        var residentialId = meSellInfo.residentialId;
        //用户ID
        var userId = meSellInfo.userId;
        //委托ID
        var meSellId = meSellInfo.meSellId;

        if (meSellInfo.residentialId) {
            isResidential = 1;
            var residential = [[${residential}]];
            for (var i = 0; i < residential.imageInfoList.length; i++) {
                residentialImageArray.push(residential.imageInfoList[i].imagePath)
            }
            $("#residentialName").attr({"value": residential.residentialName});
            $("#city").attr({"value": residential.city});
            $("#region").attr({"value": residential.region});
            $("#priceAvg").attr({"value": residential.priceAvg});
            $("#residentialName").attr({"value": residential.residentialName});
            $("#years").attr({"value": residential.years});
            $("#residentialMeasure").attr({"value": residential.residentialMeasure});
            $("#architectureType").attr({"value": residential.architectureType});
            $("#propertyName").attr({"value": residential.propertyName});
            $("#greeningRate").attr({"value": residential.greeningRate});
            $("#plotRatio").attr({"value": residential.plotRatio});
            $("#address").attr({"value": residential.address});
            $("#longitude").attr({"value": residential.longitude});
            $("#latitude").attr({"value": residential.latitude});

            $('#residentialName').attr("disabled", true);
            $('#city').attr("disabled", true);
            $('#region').attr("disabled", true);
            $('#priceAvg').attr("disabled", true);
            $('#residentialName').attr("disabled", true);
            $('#years').attr("disabled", true);
            $('#residentialMeasure').attr("disabled", true);
            $('#architectureType').attr("disabled", true);
            $('#propertyName').attr("disabled", true);
            $('#greeningRate').attr("disabled", true);
            $('#plotRatio').attr("disabled", true);
            $('#address').attr("disabled", true);
            $('#longitude').attr("disabled", true);
            $('#latitude').attr("disabled", true);
            $('#residentialFile').attr("disabled", true);

            var housing = [[${housing}]];
            if (housing != null) {
                $("#price").attr({"value": housing.price});
                $("#unitPrice").attr({"value": housing.unitPrice});
                $("#measure").attr({"value": housing.measure});
                $("#floor").attr({"value": housing.floor});
                $("#renovation").attr({"value": housing.renovation});
                $("#louhu").attr({"value": housing.louhu});
                $("#orientation").attr({"value": housing.orientation});
                $("#phone").attr({"value": housing.phone});
                $("#roomNum").attr({"value": housing.roomNum});
                $("#officeNum").attr({"value": housing.officeNum});

                $('#price').attr("disabled", true);
                $('#unitPrice').attr("disabled", true);
                $('#measure').attr("disabled", true);
                $('#floor').attr("disabled", true);
                $('#renovation').attr("disabled", true);
                $('#louhu').attr("disabled", true);
                $('#orientation').attr("disabled", true);
                $('#phone').attr("disabled", true);
                $('#roomNum').attr("disabled", true);
                $('#officeNum').attr("disabled", true);
                $('#housingFile').attr("disabled", true);

                for (var i = 0; i < housing.imageInfoList.length; i++) {
                    HousingImageArray.push(housing.imageInfoList[i].imagePath)
                }

                var sell = [[${sell}]];
                if (sell != null) {
                    $("#title").attr({"value": sell.title});
                    $("#sellLabel").attr({"value": sell.sellLabel});
                    $('#title').attr("disabled", true);
                    $('#sellLabel').attr("disabled", true);
                    isSee = 1;
                }
            }

        } else {
            $("#residentialName").attr({"value": meSellInfo.residentialName});
        }

        $('#lable').select2({
            placeholder: "请选择岗位",
            allowClear: true
        });

        $("#wizard").steps();
        $("#form").steps({
            bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
                if (currentIndex > newIndex) {
                    return true;
                }
                var form = $(this);
                if (currentIndex < newIndex) {
                }
                return form.valid();
            }, onStepChanged: function (event, currentIndex, priorIndex) {


            }, onFinishing: function (event, currentIndex) {
                var form = $(this);
                form.validate().settings.ignore = ":disabled";
                return form.valid();
            }, onFinished: function (event, currentIndex) {

                if (isSee == 1) {
                    $.modal.closeTab();
                } else {
                    var formData = new FormData($("#form")[0]);
                    formData.append("isResidential", isResidential);
                    formData.append("residentialId", residentialId);
                    formData.append("meSellId", meSellId);
                    formData.append("userId", userId);

                    $.ajax({
                        type: "POST",
                        url: ctx + "housingEntrust/addHousingSell",
                        data: formData,
                        processData: false,
                        contentType: false,
                        async: false,
                        success: function (data) {
                            $.operate.successCallback(data);
                        }
                    });
                }
            }
        })

        $("#residentialFile").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '#',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: residentialImageArray
        });

        $("#housingFile").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '#',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: HousingImageArray
        });
    });
</script>
</body>
</html>
